<template>
  <div class="header">
    <div style="font-size: 20px">
      <Fold
        v-if="!isCollapse"
        style="width: 1em; height: 1em; margin-right: 8px; color: white"
        @click="isCollapse = !isCollapse"
      />
      <Expand
        v-if="isCollapse"
        style="width: 1em; height: 1em; margin-right: 8px; color: white"
        @click="isCollapse = !isCollapse"
      />
      <span class="title">东软环保监督管理系统</span>
    </div>
  </div>
</template>

<script setup>
import { Fold, Expand } from '@element-plus/icons-vue'
import { useMenus } from '@/stores/menu.js'
import { storeToRefs } from 'pinia'
const menuStore = useMenus()
const { isCollapse } = storeToRefs(menuStore)
</script>

<style scoped lang="scss">
.header {
  background-color: #324157;
  .title {
    line-height: 48px;
    font-size: 20px;
    color: white;
  }
}
</style>
